<template>
	<div>
		<div ref="editor" style="text-align:left;"></div>
	</div>
</template>

<script>
	import $ from 'jquery';
	import ue from 'wangeditor';
	export default {
		name: 'editor',
		props: {
			defaultMsg: '',
			uploadUrl: ''
		},
		data() {
			return {
				editor: null
			}
		},
		mounted() {
			this.initEditor();
		},
		methods: {
			initEditor() {
				let self = this;
				if(this.editor == null) {
					this.editor = new ue(this.$refs.editor);
				}
				//下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
				//this.editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
				this.editor.customConfig.uploadImgServer = this.uploadUrl; // 上传图片到服务器
				this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
				this.editor.customConfig.uploadImgMaxLength = 5;

				this.editor.customConfig.withCredentials = true;
				this.editor.customConfig.customUploadImg = function(files, insert) {
					var formData = new FormData(); // FormData 对象
					formData.append("file", files[0]); // 文件对象
					$.ajax({
						url: self.uploadUrl,
						type: "post",
						data: formData,
						processData: false,
						contentType: false,
						success: function(res) {
							if(res.statusCode == 1) {
								insert(self.httptool.rootUrl + res.data);
							}
						},
						error: function(err) {
							alert("网络连接失败,稍后重试", err);
						}
					})
				}
				this.editor.create();

				this.editor.txt.html(this.defaultMsg);

			},
			getUEContent() { // 获取内容方法				
				return this.editor.txt.html();
			},
			setUEContent(content) { // 获取内容方法
				return this.editor.txt.html(this.content);
			}
		},
		watch: {
			defaultMsg(val) {
				this.initEditor();
			}
		}
	}
</script>